import React, { useState } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text,
  FlatList
} from 'react-native';

function SlideCard (props) {
  const { navigation, list, type = 'squareSlide', title } = props;

  const renderItem = ({ item, index }) => {
    if (type === "circularSlide") {
      return (
        <View style={[styles.circularBox, index !== 0 ? styles.circularBoxRL : null]} key={index}>
          <Image
            style={styles.circularBoxBannerImg}
            source={item.img} />
        </View>
      )
    } else if (type === "squareSlide") {
      return (
        <View style={[styles.box, index !== 0 ? styles.boxRL : null]} key={index}>
          {
            item.type === 'big' ?
              <Image
                style={styles.bannerImg}
                source={item.img} />
              : (
                <View style={styles.bannerImgBox}>
                  {
                    item.imgList.length ? item.imgList.map((obj, index) => {
                      return <Image
                        key={index}
                        style={styles.bannerSmallImg}
                        source={obj.img} />
                    }) : null
                  }
                </View>
              )
          }
        </View>
      )
    }
  };


  return (
    <View style={styles.card}>
      <View style={styles.head}>
        <Text style={styles.title}>{title}</Text>
      </View>
      <FlatList
        horizontal
        data={list}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  card: {
    width: 335,
    marginTop: 12
  },
  head: {
    marginBottom: 13
  },
  title: {
    fontSize: 18,
    color: 'rgb(0, 0, 0)',
    fontFamily: 'SF Pro Display',
    fontSize: 21,
    lineHeight: 31,
    letterSpacing: 0.25200000405311584,
    textAlign: 'left'
  },
  box: {
    width: 143,
    height: 143
  },
  boxRL: {
    marginLeft: 15
  },
  bannerImg: {
    width: '100%',
    height: '100%',
    borderRadius: 6
  },
  bannerImgBox: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  bannerSmallImg: {
    width: 66,
    height: 66,
    borderRadius: 4,
    marginBottom: 11
  },
  circularBoxBannerImg: {
    width: '100%',
    height: '100%',
    borderRadius: 60
  },
  circularBox: {
    width: 60,
    height: 60
  },
  circularBoxRL: {
    marginLeft: 17
  }
})

export default SlideCard;